<template>
	<view class="container">
		<com-head textTit="绑定银行卡" :typeVal="1" :scrollTop="scrollTop"></com-head>


		<view class="rechargeAmount">

			<!-- 身份信息 -->
			<view class="title">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>身份信息
			</view>
			<view class="groupList">
				<view class="item">
					<text>姓名</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.name" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<text>手机号</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.mobile_no" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<text>身份证号</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.cert_no" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<text>证件类型</text>
					<view class="right" @click="typeShow = true">
						<view>{{fromData.cert_validity_type == 1 ? '长期有效' : '非长期有效'}}</view>
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view class="item">
					<text>银行卡号</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.bank_number" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<text>有效期开始日期</text>
					<view class="right" @click="calendarShow= true">
						<input class="uni-input" v-model="fromData.cert_begin_date" disabled placeholder="请输入" />
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<!--  cert_validity_type等于0的时候必填 -->
				<view class="item" v-if="fromData.cert_validity_type != 1">
					<text>有效期截止日期</text>
					<view class="right" @click="calendarShows= true">
						<input class="uni-input" v-model="fromData.cert_end_date" placeholder="请输入" />
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view class="item" @click="pickerShow = true">
					<text>所在地区</text>
					<view class="right">
						{{fromData.address || '请选择'}}
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
			</view>

			<!-- 提交 -->
			<view class="payBtn" @click="submit">
				<view>提交</view>
			</view>

		</view>
		
		
		<!-- 地区组件 -->
		<u-select v-model="pickerShow" mode="mutil-column-auto" :list="pickerList" value-name="id" label-name="area_name" child-name="child" @confirm="pickerConfirm"></u-select>
		
		<!-- 证件类型 -->
		<u-select v-model="typeShow" :list="typeList" @confirm="typeConfirm"></u-select>
		
		<!-- 有效日期开始 -->
		<u-calendar v-model="calendarShow" mode="date" @change="calendarChange"></u-calendar>
		<!-- 有效日期结束 -->
		<u-calendar v-model="calendarShows" mode="date" max-date="2099-12-30" @change="calendarChanges"></u-calendar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isRead: false,
				activeIndex: 0,
				typeShow: false,
				calendarShow:false,
				calendarShows: false,
				fromData: {
					name: '',// 姓名
					cert_no: '',// 身份证号
					prov_id: '',// 省id
					area_id: '',// 市id
					bank_number: '',// 银行卡号
					mobile_no: '', // 手机号
					cert_validity_type: '0', // 证件类型 1:长期有效 0:非长期有效
					cert_begin_date: '', // 证件有效期开始日期 2024-08-26
					cert_end_date: '', // 证件有效期开始日期
					address: '' //省市区绑定值
				},
				typeList: [
					{
						value: '0',
						label: '非长期有效'
					},
					{
						value: '1',
						label: '长期有效'
					}
				],
				pickerList: [],
				scrollTop: 0,
				pickerShow: false,
				selectList: []
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({type}) {
			if (type) {
				// 读取数据
				const obj = uni.getStorageSync('bankCard');
				console.log(88, obj)
				this.fromData = obj
			}
			this.getBank()
			this.treeFun()
		},
		methods: {
			calendarChanges(e){
				this.fromData.cert_end_date = e.result
			},
			calendarChange(e) {
				this.fromData.cert_begin_date = e.result
			},
			typeConfirm(e) {
				this.fromData.cert_validity_type = e[0].value
			},
			validateForm(formData) {
			  for (const key in formData) {
				  console.log(11, formData[key])
			    if (formData[key] === '' || formData[key] === null || formData[key] === undefined) {
				  // this.utlis.Toast(`${key} 不能为空`)
				  console.log(45, formData.cert_validity_type)
				  if (formData['cert_validity_type'] == '1' && formData['cert_end_date'] == '') return true;
				  this.utlis.Toast(`请填写完整信息`)
			      return false;
			    }
			  }
			  return true;
			},
			async submit() {
				// 提交时调用
				if (this.validateForm(this.fromData)){
					console.log(666, this.fromData)
					let { data, code, msg } = await this.$u.api.setUserCard(this.fromData);
					if (code) {
						this.utlis.Toast("提交成功")
						setTimeout(()=>{
							this.jump('', 'back')
						}, 1000)
					}
				}
			},
			pickerFun() {
				this.pickerShow = true
			},
			async treeFun() {
				let { data, code, msg } = await this.$u.api.tree();
				if (code) {
					this.pickerList = data
					console.log(66, this.pickerList)
				}
			},
			async getBank() {
				let { data, code, msg } = await this.$u.api.getBank();
				if (code) {
					this.selectList = data
				}
			},
			// 回调参数为包含columnIndex、value、values
			pickerConfirm(e) {
				console.log('confirm', e)
				this.pickerShow = false
				this.fromData.address = e[0].label + '-' + e[1].label + '-' + e[2].label
				this.fromData.prov_id = e[0].value || ''
				this.fromData.area_id = e[1].value || ''
				// this.fromData.area_id = e[2].value || ''
				console.log(34, this.fromData.prov_id, this.fromData.area_id)
			},
			change(e) {
			    console.log('change', e);
			},
			checkedFun() {
				console.log(11)
				this.isRead = !this.isRead
			},
			chose(index) {
				this.activeIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 32rpx;

		.payBtn {
			width: 100%;
			margin: 0 auto;

			view {
				width: 686rpx;
				height: 96rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 96rpx;
				background: linear-gradient(85deg, #50DCC2, #007664);
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				margin: 100rpx 0 20rpx 0;
			}
		}

		.rechargeAmount {
			margin: 40rpx 0 44rpx 0;

			>.title {
				font-size: 32rpx;
				color: #242833;
				margin: 32rpx 0 20rpx 0;

				image {
					width: 9rpx;
					height: 32rpx;
					position: relative;
					top: 5rpx;
					margin-right: 12rpx;
				}
			}

			.groupList {
				width: 100%;
				padding: 0 32rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				margin: 49rpx 0 34rpx 0;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 96rpx;
					color: #333333;
					font-size: 26rpx;
					border-bottom: 1rpx solid rgba(142, 142, 142, .24);
					position: relative;

					.image {
						width: 33rpx;
						height: 33rpx;
						display: inline-block;
						position: relative;
						top: 5rpx;
						margin-right: 19rpx;
					}

					.imgs {
						width: 33rpx;
						height: 33rpx;
						display: inline-block;
						position: absolute;
						right: 0;
					}

					.right {
						// width: 450rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						text {
							margin-right: 32rpx;
						}
					}
				}

				.item:last-child {
					border-bottom: 1rpx solid #F6F7FA;
				}
			}
		}
	}
	.uni-input{
		text-align: right;
		width: 450rpx;
		// border: 1rpx solid red;
		font-size: 28rpx;
		color: #4D5562;
	}

	.imgbox{
		display: flex;
		margin-top: 28rpx;
		width: 686rpx;
		height: 248rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		&__left, &__right{
			flex: 1;
			width: 313rpx;
			height: 183rpx;
			border-radius: 10rpx;
			image{
				width: 313rpx;
				height: 183rpx;
				background: #f6f7fa;
				// border: 1rpx solid red;
			}
		}
		&__left{
			margin: 33rpx 20rpx 0 24rpx;
		}
		&__right{
			margin: 33rpx 20rpx 0 0;
		}
		.imgWrap{
			position: relative;
			u-icon{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		
	}
	.groupList{
		text{
			font-size: 28rpx;
			color: #4D5562;
		}
		input{
			color: #333;
		}
	}
</style>
<style>
	page {
		background-color: #F6F7FA;
	}
</style>